<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>登录</title>
		<link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
		<link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./css/login.css" />
	</head>
	<body class="application application-offset">
		<div class="container-fluid container-application">
			<div class="main-content position-relative">
				<!-- Page content -->
				<div class="page-content">
					<div class="min-vh-100 py-5 d-flex align-items-center">
						<div class="w-100">
							<div class="row justify-content-center">
								<div class="col-sm-8 col-lg-4">
									<div class="card shadow zindex-100 mb-0">
										<div class="card-body px-md-5 py-5">
											<div class="mb-5">
												<h6 class="h3">传智教育-注册</h6>
											</div>
											<span class="clearfix"></span>
											<form role="form" autocomplete="off">
												<div class="form-group">
													<label class="form-control-label">账号</label>
													<div class="input-group input-group-merge">
														<div class="input-group-prepend">
															<span class="input-group-text"
																><i class="bi bi-person"></i
															></span>
														</div>
														<input
															name="username"
															type="text"
															class="form-control"
															id="input-email"
															placeholder="请输入账号"
														/>
													</div>
												</div>
												<div class="form-group mb-4">
													<div class="d-flex align-items-center justify-content-between">
														<div>
															<label class="form-control-label">密码</label>
														</div>
														<div class="mb-2">
															<a
																href="javascript:;"
																class="small text-muted text-underline--dashed border-primary"
																>忘记密码</a
															>
														</div>
													</div>
													<div class="input-group input-group-merge">
														<div class="input-group-prepend">
															<span class="input-group-text"
																><i class="bi bi-key"></i
															></span>
														</div>
														<input
															name="password"
															type="password"
															class="form-control"
															id="input-password"
															placeholder="请输入密码"
														/>
														<div class="input-group-append">
															<span class="input-group-text">
																<a
																	href="javascript:;"
																	data-toggle="password-text"
																	data-target="#input-password"
																>
																	<i class="bi bi-eye-fill text-blue"></i>
																</a>
															</span>
														</div>
													</div>
												</div>
												<div class="mt-4">
													<button
														id="btn-register"
														type="button"
														class="btn btn-sm btn-info btn-icon btn-blue rounded-pill"
													>
														<span class="btn-inner--text">注册</span>
														<span class="btn-inner--icon"
															><i class="bi bi-arrow-right"></i
														></span>
													</button>
												</div>
											</form>
										</div>
										<div class="card-footer px-md-5">
											<small>已经注册？</small>
											<a href="./login.html" class="small font-weight-bold text-blue">去登录吧</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- toast -->
		<div class="position-fixed top-0 start-50 pt-4" style="z-index: 999; transform: translateX(-50%)">
			<div id="myToast" class="toast bg-rgba">
				<div class="toast-body">提示消息</div>
			</div>
		</div>
		<script src="./bootstrap/bootstrap.min.js"></script>
		<script src="./lib/form-serialize.js"></script>
		<script src="./lib/axios.js"></script>
		<script src="./js/common.js"></script>
		<script>
			// 1、-------------轻提示------------------

			tip('今天又是美好的一天');

			// 2、---------------注册功能---------------
			document.querySelector('#btn-register').onclick = async function () {
				//console.log(123);
				const data = serialize(document.querySelector('form'), { hash: true });
				if (data.username === undefined || data.password === undefined) {
					tip('账户或密码不能为空，请输入');
					return;
				}
				if (data.password.trim().length < 6) {
					tip('密码至少6位，请重新输入');
					return;
				}

				try {
					const res = await axios({
						url: '/register',
						method: 'post',
						data,
					});
					//console.log(res);

					tip(res.message);
					setTimeout(() => {
						window.location.assign('./login.html');
					}, 2000);
				} catch (err) {
					//console.dir(err);
					tip(err.response.data.message);
				}
			};

			// 切换密码显示与隐藏
			document.querySelector('.input-group-text a').onmouseover = function () {
				//console.log(123);
				document.querySelector('[name=password]').type = 'text';
			};
			document.querySelector('.input-group-text a').onmouseout = function () {
				//console.log(123);
				document.querySelector('[name=password]').type = 'password';
			};
		</script>
	</body>
</html>
